<template>
  <v-app dark>
    <v-app-bar
      hide-on-scroll
      elevate-on-scroll
      app
      :color="setting.color"
    >
      <v-container class="mx-auto py-0">
        <v-row align="center">
          <v-toolbar-title
            v-text="title"
            class="bar-item"
          />
          <v-img
            :src="require('@/assets/logo.png')"
            class="bar-item"
            contain
            height="48"
            width="48"
            max-width="48"
            @click="$vuetify.goTo(0)"
          />

          <v-btn
            v-for="(link, i) in links"
            :key="i"
            :to="link.href"
            class="hidden-sm-and-down bar-item"
            text
          >
            {{ link.text }}
          </v-btn>

          <v-spacer />
          <v-menu
            class="bar-item"
            origin="center center"
            transition="scale-transition"
            offset-y
          >
            <template v-slot:activator="{on, attrs}">
              <v-btn
                :color="setting.color"
                v-bind="attrs"
                v-on="on"
              >
                {{setting.color==='default'?'主题':setting.color}}
              </v-btn>
            </template>
            <v-list>
              <v-list-item
                @click="changeSettingColor(item)"
                v-for="(item, index) in setting.colors"
                :key="index"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
          <v-text-field
            class="bar-item"
            append-icon="mdi-magnify"
            v-model="setting.search"
            label="Search"
            hide-details
            required
            dark
            style="max-width: 300px;"
          ></v-text-field>

        </v-row>
      </v-container>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="setting.miniVariant"
      :clipped="clipped"
      :color="setting.color"
      right
      app
      max-width="375"
    >
      <v-img
        src="https://cdn.vuetifyjs.com/images/lists/ali.png"
        height="300px"
        dark
      >
        <v-row class="fill-height">
          <v-card-title>
            <v-list-item class="px-2">
              <v-btn
                icon
                @click.stop="setting.miniVariant = !setting.miniVariant"
              >
                <v-icon>mdi-{{ `chevron-${setting.miniVariant ? 'left' : 'right'}` }}</v-icon>
              </v-btn>
              <v-list-item-title>John Leider</v-list-item-title>
            </v-list-item>
          </v-card-title>
          <v-card-title class="white--text pl-12 pt-12">
            <div class="display-1 pl-8 pt-12">Ut Brown</div>
          </v-card-title>
        </v-row>
      </v-img>
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
        </v-list-item-avatar>
        <v-list-item-title>John Leider</v-list-item-title>
        <v-btn
          icon
          @click.stop="setting.miniVariant = !setting.miniVariant"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <template v-slot:append>
        <div class="pa-2">
          <v-btn block to="login">Logout</v-btn>
        </div>
      </template>
    </v-navigation-drawer>
    <v-main>
      <v-main fill-height>
        <app-main />
      </v-main>
    </v-main>
    <v-footer
      :color="setting.color"
      app
    >
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import { AppMain } from './components'
import Settings from '@/setting'

import { UserModule } from '@/store/user'
import { SettingsModule } from '@/store/setting'
import { MenuState } from '@/store/menu/types'

const menuModule = namespace('menu')
@Component({
  components: { AppMain }
})
export default class Layout extends Vue {
  @menuModule.Action('fetchData')
  public fetchData!: Function;

  @menuModule.Getter('links')
  public links!: MenuState;

  public setting = SettingsModule;
  title = Settings.title;
  public loginStatus: string = UserModule.token;
  private clipped = false;
  private drawer = false;

  public created() {
    if (this.loginStatus.length === 0 || this.loginStatus === '') {
      UserModule.Login({ username: '111', password: '11' })
      SettingsModule.initSetting()
    }
    this.$request('api/test')
      .then((result) => {
        console.log(result)
      })
      .catch((err) => {
        console.log(err)
      })
    this.loginStatus = UserModule.token
  }

  private changeSettingColor(color: string) {
    SettingsModule.ChangeSetting({ key: 'color', value: color })
  }

  private items = [
    {
      icon: 'mdi-apps',
      title: 'Welcome',
      to: '/'
    },
    {
      icon: 'mdi-chart-bubble',
      title: 'Inspire',
      to: '/inspire'
    }
  ];

  onClick(e: Event, item: { text: string, href: string }) {
    e.stopPropagation()
    if (!item.href) return
    this.$vuetify.goTo(item.href.endsWith('!') ? 0 : item.href)
  }
}
</script>

<style lang="scss">
.bar-item {
  margin: 0 10px;
}
</style>
